import React from 'react';
import { Table, Tooltip } from 'antd';

// 自定义判断文本是否溢出的函数
const isTextOverflow = (text, maxWidth) => {
  // 创建一个不可见的参考元素（用于计算文本实际宽度）
  const tempDiv = document.createElement('div');
  tempDiv.style.visibility = 'hidden'; // 不可见但仍占据空间
  tempDiv.style.whiteSpace = 'nowrap'; // 强制单行
  tempDiv.style.position = 'absolute'; // 脱离文档流，避免影响布局
  tempDiv.textContent = text; // 设置文本内容

  // 将参考元素添加到 DOM 中（否则宽度计算为 0）
  document.body.appendChild(tempDiv);

  // 获取文本实际宽度
  const actualWidth = tempDiv.offsetWidth;

  // 移除参考元素，避免内存泄漏
  document.body.removeChild(tempDiv);

  // 判断实际宽度是否超过容器最大宽度
  return actualWidth > maxWidth;
};



const textOverflowStyle = {
  whiteSpace: 'nowrap', // 禁止文本换行，强制单行显示
  overflow: 'hidden', // 超出容器的内容隐藏
  textOverflow: 'ellipsis', // 溢出内容显示为省略号（`...`）
  maxWidth: '180px', // 必须设置容器宽度，否则溢出隐藏无效 设置最大宽度（根据表格列宽调整）
  // 可选：添加鼠标样式提示用户可查看完整内容
  cursor: 'pointer',
};

const columnRender1 = (text) => (
  <Tooltip title={text}>
    <div style={textOverflowStyle}>{text}</div>
  </Tooltip>
)

const columnsRender2 = (text) => {
  const shouldShowTooltip = isTextOverflow(text, 180); // 180 对应 maxWidth
  return shouldShowTooltip ? (
    <Tooltip title={text} 
      // overlayStyle={{
      //   maxWidth: '300px', // Tooltip 最大宽度
      //   wordWrap: 'break-word', // 长单词自动换行
      //   padding: '8px 12px',
      //   fontSize: '14px',
      // }}
      // placement="top" // 提示位置（top/bottom/left/right）
    >
      <div style={textOverflowStyle}>{text}</div>
    </Tooltip>
  ) : (
    <div style={textOverflowStyle}>{text}</div>
  );
}
// 渲染函数中动态判断是否显示 Tooltip
const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    width: 180,
    render: columnRender1,
    // render: columnsRender2,
  },
  {
    title: '描述',
    dataIndex: 'description',
    width: 180,
    // render: columnRender1,
    render: columnsRender2,
  },
];
const TableNoWrapToolTips = () => {
  const data = [
    {
      key: '1',
      name: '张三（超长姓名测试：张三张三张三张三张三）',
      description: '这是一段很长的描述内容，需要测试文本溢出和Tooltip效果这是一段很长的描述内容，需要测试文本溢出和Tooltip效果...',
    },
    {
      key: '2',
      name: '李四',
      description: '简短描述',
    },
  ];

  return (
    <Table columns={columns} dataSource={data} style={{ width: '100%' }} />
  );
};

export default TableNoWrapToolTips;